<template>
    <section class="xf-content core">
        <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </transition>
        </router-view>
        <div class="change-btn xf-content-top">
            <button type="button" class="xf-shadow-out" @click="changeRoute">{{ routeName }}</button>
        </div>
    </section>
</template>

<script setup lang="ts" name="Content">
    import { ref } from 'vue'
    import { RouterView, useRouter, useRoute } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useBottomTextStore } from '@/store'

    const router = useRouter()
    const route = useRoute()

    const bottomTextStore = useBottomTextStore()
    const { homeBtnName, friendsBtnName } = storeToRefs(bottomTextStore)
    
    let routeName = ref(homeBtnName.value)

    const changeRoute = () => {
        router.replace({
            name: route.name === 'friends' ? 'home' : 'friends'
        })
    }

    // 前置路由守卫监测路径
    router.beforeEach((to, _from, next) => {
        routeName.value = to.name === 'friends' ? homeBtnName.value : friendsBtnName.value
        next()
    })
</script>

<style scoped lang="less">
    .xf-content {
        margin-top: 2em;

        .change-btn {
            height: 45px;

            button {
                display: inline-block;
                width: 140px;
                height: 100%;
                font-size: 1.2em;
                font-weight: bold;
                color: var(--nitai5-color-14);
                -webkit-text-transform: uppercase;
                text-transform: uppercase;
                -webkit-transition: color .8s;
                -o-transition: color .8s;
                transition: color .8s;

                &:active {
                    -webkit-box-shadow: var(--nitai5-shadow-int);
                    box-shadow: var(--nitai5-shadow-int);
                }
            }
        }
    }

    .fade-enter-active,
    .fade-leave-active {
        -webkit-transition: opacity .35s;
        -o-transition: opacity .35s;
        transition: opacity .35s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .xf-night .xf-content .change-btn button:active {
        -webkit-box-shadow: var(--nitai5-shadow-int-dark);
        box-shadow: var(--nitai5-shadow-int-dark);
    }
</style>